.component-matrix {
	position: relative;

	svg {
		width: 100%;

		&.loading {
			opacity: 0.5;
		}
	}

	text {
		fill: black;
		font-weight: normal;

		&.archetype {

			&.selectable {
				cursor: pointer;
			}

			&.selected {
				fill: $lightblue;
				font-weight: bold;
			}

			&.interesting {
				font-weight: bold;
			}

			&.boring {
				fill: #ccc;
			}
		}
	}

	.cells {
		user-select: none;

		rect {
			stroke: white;
			stroke-width: 1;
		}

		.selectable {
			cursor: pointer;
		}
	}

	.selections {
		rect {
			fill: none;
			stroke: $lightblue;
			stroke-width: 3;
		}
	}

	.vertical-text {
		transform: rotate(90deg);
		transform-origin: left top 0;
	}

	.matrix-tooltip {
		color: white;
		background-color: rgba(0, 0, 0, 0.8);
		position: absolute;
		z-index: 100;
		text-align: left;
		font-size: 1em;
		font-family: sans-serif;
		padding: 4px 8px;
		transform: translateX(-50%);
		border-radius: 4px;
		white-space: nowrap;
	}
}

.component-distribution {
	tr {
		&.selectable {
			cursor: pointer;
		}

		&.active {
			color: $lightblue;
		}
	}

	th, td {
		&, &:hover {
			background-color: inherit;
		}
	}
}
